<template>

     <!-- :visible.sync="dialogVisible"通过哪个变量控制弹窗的可见性 -->
    <el-dialog
      title="修改字典"
      :visible.sync="dialogVisible"
      width="50%">

      <!-- :model 将数据form赋值给表单内组件 -->
      <el-form ref="form" :model="formBean" label-width="80px" style="margin-top: 30px;">
         <el-form-item label="业务类型" prop="bsName">
           <el-input v-model="formBean.bsName" placeholder="请输入业务类型"></el-input>
         </el-form-item>
         <el-form-item label="名称" prop="name">
           <el-input v-model="formBean.name" placeholder="请输入名称"></el-input>
         </el-form-item>

         <el-form-item label="联系方式" prop="contact">
           <el-input v-model="formBean.contact" placeholder="请输入联系方式"></el-input>
         </el-form-item>

         <el-form-item label="图标1" prop="icon1">
           <div class="row">
              <el-input v-model="formBean.icon1" placeholder="请输入图标1"></el-input>
              <MyFileUpload @uploadFileSuccess="onIconUpLoadSuccess"/>
           </div>
         </el-form-item>

         <el-form-item label="图标2" prop="icon2">
           <div class="row">
             <el-input v-model="formBean.icon2" placeholder="请输入图标2"></el-input>
             <MyFileUpload @uploadFileSuccess="onIcon2UpLoadSuccess"></MyFileUpload>
           </div>

         </el-form-item>

         <el-form-item label="语言" prop="language">
             <el-select v-model="formBean.language" placeholder="请选择语言">
                 <el-option
                   v-for="item in languageList"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
             </el-select>

         </el-form-item>

       </el-form>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>

    </el-dialog>

</template>

<script>
      // vue 怎么调用其他js文件的方法
      import { updateDic } from '@/api/system/dict2/type'; // 引入特定的方法
      import MyFileUpload  from '@/components/MyFileUpload/index.vue';
      export default{
         components:{
              MyFileUpload
         },
         props: {
            // 定义一个名为 'message' 的 prop，并指定其类型为 String
            // 可以定义更多 prop...
            form:{
                // fileType:''
                id:-1,
                bsName:'',
                name:'',
                contact:'',
                icon1:'',
                icon2:'',
                language:''

            }

         },
         watch:{
            //  form 属性
            form: {
                 handler(newVal, oldVal) {
                      // formBean监听form属性的变化
                      this.formBean = JSON.parse(JSON.stringify(this.form))
                 },
                 deep: true,
                 immediate: false
               }
         },

        data(){
          return{
            dialogVisible:false,
            languageList:[
                {
                  "label":"中文",
                  "value":"zh"
                },
                {
                  "label":"英语",
                  "value":"en"
                },
                {
                  "label":"法语",
                  "value":"fr"
                },
                {
                  "label":"日语",
                  "value":"ja"
                }
            ],
            formBean:{
                // fileType:''
                id:-1,
                bsName:'',
                name:'',
                contact:'',
                icon1:'',
                icon2:'',
                language:''

            }

            // PickBean:{fileType:'1'}
          }
        },
        created(){

        },
        methods:{
          onIconUpLoadSuccess(url){
              this.formBean.icon1=url;
          },
          onIcon2UpLoadSuccess(url){
              this.formBean.icon2=url;
              console.log("地址",this.formBean);
          },

          showDialog(){
            this.dialogVisible=true;
          },

          onSubmit(){
             // console.log(this.formBean);

            updateDic(this.formBean).then(response => {
              console.log(response);
              this.dialogVisible=false;
              // this.$emit('custom-event', data); // 触发自定义事件，并传递数据给父组件
              this.$emit('custom-event');

            });

          }

        }


      }
</script>

<style scoped>
    .line_image{
        display: flex;
        flex-direction: row;

    }
    .line_image_margin{
        display: flex;
        flex-direction: row;
        margin-top: 30px;
    }
    .line_image_lable{
        width: 70px;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }
    .upload-demo{
        margin-left: 15px;

    }
    .image_label{
        color: #666666;
    }
    .row{
      display: flex;
      flex-direction: row;
    }

</style>
